<template>
	<div class="category-container">
		<!-- 引用头部组件 -->
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="top-zhanwei"></div>
		<div class="category-img">
			<img src="../../../assets/images/shopping/img_fangzi03@3x.png" alt="">
		</div>
		<div class="category-item-wrap">
			<p>
				<span>双人床</span><i class="iconfont  icon-iconfontyoujiantou you"></i>
			</p>
			<div class="category-item">
				<div class="detail-item">
					<img src="../../../assets/images/shopping/woshi1.jpg" alt="">
					<p class="bed-title">
						莱尔维克 <span>床架</span>
					</p>
					<p class="bed-price">
						<i class="iconfont icon-renminbi"></i>
						<span>895.00</span>
					</p>
				</div>
				<div class="detail-item">
					<img src="../../../assets/images/shopping/woshi1.jpg" alt="">
					<p class="bed-title">
						莱尔维克 <span>床架</span>
					</p>
					<p class="bed-price">
						<i class="iconfont icon-renminbi"></i>
						<span>895.00</span>
					</p>
				</div>
				<div class="detail-item">
					<img src="../../../assets/images/shopping/woshi1.jpg" alt="">
					<p class="bed-title">
						莱尔维克 <span>床架</span>
					</p>
					<p class="bed-price">
						<i class="iconfont icon-renminbi"></i>
						<span>895.00</span>
					</p>
				</div>
			</div>
		</div>
		<div class="category-item-wrap">
			<p>
				<span>单人床</span><i class="iconfont  icon-iconfontyoujiantou you"></i>
			</p>
			<div class="category-item">
				<div class="detail-item">
					<img src="../../../assets/images/shopping/woshi1.jpg" alt="">
					<p class="bed-title">
						莱尔维克 <span>床架</span>
					</p>
					<p class="bed-price">
						<i class="iconfont icon-renminbi"></i>
						<span>895.00</span>
					</p>
				</div>
				<div class="detail-item">
					<img src="../../../assets/images/shopping/woshi1.jpg" alt="">
					<p class="bed-title">
						莱尔维克 <span>床架</span>
					</p>
					<p class="bed-price">
						<i class="iconfont icon-renminbi"></i>
						<span>895.00</span>
					</p>
				</div>
				<div class="detail-item">
					<img src="../../../assets/images/shopping/woshi1.jpg" alt="">
					<p class="bed-title">
						莱尔维克 <span>床架</span>
					</p>
					<p class="bed-price">
						<i class="iconfont icon-renminbi"></i>
						<span>895.00</span>
					</p>
				</div>
			</div>
		</div>
		<!-- {{this.$route.params.title}} -->
	</div>
</template>
<script>
	import ShopHeader from "../../../components/shopheader"
	import  "../../../assets/iconfont/iconfont.css"
	export default{
		name:'recomdetail',
		data(){
			return{
				curTitle:"",
				categoryArr:[
					{

					}
				],
				imgArr:[
					require("../../../assets/images/shopping/detailba.png")
				],
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-xiangqing"
						}
					],
					placeholder:this.$route.params.title,
					aimUrl:"/shopping/newproduct",
					rightUrl:'/shopping/newproduct/cupboard'
				}
			}
		},
		components:{
			ShopHeader
		}
	}
</script>
<style scoped lang="less">
	.category-container{
		width: 100%;
		background-color: #fff;
		overflow: hidden;
		.top-zhanwei{
			width: 100%;
			height: 88 / 2 / 50rem;
		}
		.category-img{
			width: 100%;
			height: 480 / 2 / 50rem;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.category-item-wrap{
			.commont(){
				color: #333;
				font-weight: 700;
				font-size: 15 / 50rem;
			}
			width: 95%;
			height: 308 / 2 / 50rem;
			margin: 20 / 2 / 50rem;
			overflow: hidden;
			p{
				position: relative;
				span{
					.commont();
				}
				i.you{
					color: #f55;
					font-size: 20 / 50rem;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
			.category-item{
				width: 100%;
				height: 250 / 2 / 50rem;
				margin-top: 20 / 2 / 50rem;
				.detail-item{
					text-align: center;
					width: 31%;
					float: left;
					height: 100%;
					box-shadow: 0 0 10 / 50rem 1 / 50rem rgba(0,0,0,.2);
					border-radius: 5 / 50rem;
					img{
						width: 100%;
						height: 250 / 2 / 1.8 /50rem;
						border-radius: 5 / 50rem;
					}
					.bed-title{
						margin-top: 10 / 50rem;
						.commont();
						span{
							font-size: 12 / 50rem;
						}
					}
					.bed-price{
						margin-top: 2 / 50rem;
						i{
							color: #f55;
							font-size: 18 / 50rem;
						}
						span{
							color: #f55;
						}
					}
				}
				.detail-item:nth-child(2){
					margin: 0 20 / 2 / 50rem;
				}
			}
		}
	}
</style>